import { View, Text, Button, Form, Image, Input } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useBoolean, useRequest, useSetState } from 'ahooks'
import { fetchWithdraw, getWithdrawConfig } from '@/api'
import { HtmlView } from '@/components/taro-html-view'

import './index.module.scss'

export default function Index() {
  const [showWeixin, { setFalse, setTrue }] = useBoolean(false)

  const { loading, run } = useRequest(fetchWithdraw, {
    manual: true,
    onSuccess: () => {
      Taro.showToast({ title: '提现成功', icon: 'success' })
      setTrue()
    }
  })

  const [form, setForm] = useSetState({
    name: '',
    accno: '',
    rmb: '',
  });

  const { data: { data: config = {} } = {} } = useRequest(getWithdrawConfig, {
    onSuccess: (res) => {
      // console.log(res);
      if (res?.code == 0) {
        form.name = res?.data?.acc_name
        form.accno = res?.data?.acc_no
      }
    }
  })
// console.log(config);

  // form.rmb = Math.min(config?.rmb || 0, config?.max);

  const updataPassword = async () => {
    // console.log(form.rmb);

    if (!form.rmb) return Taro.showToast({ title: '提现金额必须大于0', icon: 'none' })

    const formData = {
      value: Number(form.rmb),//config?.points || 0,
      rate: config?.rate,
      ...form
    }
    if (!formData?.value) return Taro.showToast({ title: '系统异常，请稍后重试', icon: 'none' })
    if (!formData?.name) return Taro.showToast({ title: '支付宝姓名不能为空', icon: 'none' })
    if (!formData?.accno) return Taro.showToast({ title: '支付宝账号不能为空', icon: 'none' })

    run(formData)
  }
  return (
    <View className='withdraw-box padding'>
      <View className='money-box margin-top-xl'>
        <Form onSubmit={updataPassword}>
          <View className='flex margin-bottom-sm'>
            <Text className='margin-right-sm '>支付宝姓名</Text>
            <Input className='flex-sub' value={form.name} onInput={e => setForm({ name: e?.target?.value || '' })} placeholder='请输入您的支付宝姓名' />
          </View>
          <View className='flex margin-bottom-sm'>
            <Text className='margin-right-sm '>支付宝账号</Text>
            <Input className='flex-sub' value={form.accno} onInput={e => setForm({ accno: e?.target?.value || '' })} placeholder='请输入您的支付宝手机' />
          </View>

          {/* <View> <Text className='margin-right-sm'>提现到账金额</Text></View>
          <View className='margin-tb flex align-center'>
            <View className='flex-sub flex align-center solid-bottom'>
              <Text className='flex align-center money-ico money-ipt padding-right text-df'>
                {config?.rmb || 0}
              </Text>
              <Text className='margin-right-sm'>元</Text>
            </View>
          </View> */}

          <View> <Text className='margin-right-sm'>提现到账金额</Text></View>
          <View className='margin-tb flex align-center'>
            <View className='flex-sub flex align-center solid-bottom'>
              <Input onInput={e => setForm({ rmb: e?.target?.value || '' })} value={form.rmb} className='flex-sub padding-right text-xl' style={{ height: '100rpx' }} placeholder='请输入金额' />
              <Text className='margin-right-sm'>元</Text>
            </View>  
          </View>

          <View className='margin-bottom'>
            <View className='text-99 text-ds flex align-center'>
              <Text>当前积分余额{config?.rmb && `（可提现${config?.rmb}元）`}：<Text className='price text-xl'>{config?.points || 0}</Text></Text>
            </View>
            <View className='text-99 text-ds flex align-center'>
              <Text>单次可提现限额：<Text className='price text-xl'>{config?.max || 0}元</Text></Text>
            </View>
            {config?.pay_date && config?.date_label && (
              <View className='text-99 text-ds flex align-center margin-top-xs'>
                <Text>{config?.date_label}：{config?.pay_date}</Text>
              </View>
            )}
          </View>
          <HtmlView previewImage className='rich-box' html={config?.rule} />
          <Button
            loading={loading}
            disabled={config?.flag !== true || loading}
            style={{ width: '92%'}}
            className={`${config?.flag ? 'main-bc' : 'btn-dbc'} text-lg text-center margin-bottom margin padding-tb-xs round line-white`}
            formType='submit'
          >
            确认提现
          </Button>
        </Form>
      </View >
      <View className={`cu-modal ${showWeixin ? 'show' : ''}`} onClick={setFalse}>
        <View className='cu-dialog' onClick={e => e?.stopPropagation()}>
          <View className='padding'>
            <Image
              className='modals-img'
              src={config?.url}
              show-menu-by-longpress
              mode='heightFix'
            />
          </View>
          <View className='flex-center'>
            <Button
              onClick={setFalse}
              className='main-bc text-lg text-center margin padding-lr-xl round line-white'
              formType='submit'
            >
              &emsp;关闭&emsp;
            </Button>
          </View>
        </View>
      </View>
    </View>
  )
}
